<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码编辑</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/topic_detail.css">
    <link rel="stylesheet" href="css/blog_mycomment.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/commom.js"></script>
    <!-- 引入ace.js -->
    <script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>
    <script src="https://cdn.bootcss.com/ace/1.2.9/ext-language_tools.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">CL</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="/blog_list.html">创作中心</a>
        <a href="/mycenter.html">个人中心</a>
        <a href="/login.html">登陆</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧题目信息 -->
        <div class="container-left">
            <!-- <h2 class="topic_title">QB1:翻转链表</h2> -->
            <h2 class="topic_title"></h2>
            <div class="left_up">
                <button class="topic">题目</button>
                <button class="discuss">讨论</button>
            </div>
            <div class="left_mid">
                <div class="level">难度</div>
                <div class="pass">通过率</div>
            </div>
            <div class="topic-content">
                <h3>描述</h3>
                <div class="describe"></div>
                <div class="ask"></div>
                <h4>示例1</h4>
                <div class="example example1"></div>
                <h4>示例2</h4>
                <div class="example example2"></div>
            </div>
        </div>
        <!-- 右侧代码编辑-->
        <div class="container-right">
            <div>
                <!-- 将页面编辑框外面套一层 div, id 设为 editor, 并且一定要设置 min-height 属性. -->
                <div id="editor" style="min-height:800px">
                    <textarea style="width: 100%; height: 200px"></textarea>
                </div>
                <div class="right_down">
                    <button class="runResult">执行结果</button>
                    <button class="input">自测输入</button>
                    <button class="log">提交记录</button>
                    <div class="kongbai"></div>
                    <button class="run">自测运行</button>
                    <button class="save" onclick="saveSubmit()" style="width: 130px;">保存并提交</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>

        // 对编译器进行初始化
        function initAce() {
            // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
            let editor = ace.edit("editor");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            editor.setTheme("ace/theme/twilight");
            editor.session.setMode("ace/mode/java");
            editor.resize();
            document.getElementById('editor').style.fontSize = '20px';
        
            return editor;
        }
        //获取刚刚初始化好的编译器
        let editor = initAce();
        
        // 由于ace.js会重新绘制页面，导致之前弄得textarea没了。因此需要换种方式
        

        
        //初始化代码编辑框 + 题目详情
        function initCodeEdit(id) {
            jQuery.ajax({
                url:"/topic/topicInfo",
                type:"POST",
                data:{"id":id},
                success:function(result) {
                    if(result != null && result.code == 200) {
                        // 将代码设置到编译器中
                        editor.setValue(result.data.topic.templateCode);
                        //题目详情
                        jQuery(".topic_title").html("QB" + result.data.topic.id + ":" + result.data.topic.title)
                        jQuery(".describe").html('<pre>'+result.data.list1+'</pre>');
                        jQuery(".ask").html('<pre>'+result.data.list2+'</pre>');
                        jQuery(".example1").html('<pre>'+result.data.list3+'</pre>');
                        jQuery(".example2").html('<pre>'+result.data.list4+'</pre>');
                    } else {
                        jQuery(".describe").text("题目加载失败，请重试！");
                    }
                }
            });
        }
        let id = getUrlValue("id")==""?1:getUrlValue("id");
        initCodeEdit(id);
        
        //代码提交运行
        function saveSubmit() {
            jQuery.ajax({
                url:"/topic/saveSubmit",
                type:"POST",                    // 获取编译器中得代码
                data:{"id":id,"code":editor.getValue()},
                success:function(result) {
                    if(result != null && result.code == 200 && result.data.length > 0) {
                        alert("运行通过");
                    } else {
                        if(result.code == 1) {
                            alert("编译出错");
                        } else if(result.code == 2) {
                            alert("运行出错");
                        } else if(result.code == 3) {
                            alert("代码禁止运行");
                        } else if(result.code == 4) {
                            alert("部分case通过");
                        } else {
                            alert("参数有误");
                        }
                        // alert(result.msg);
                    }
                }
            })
        }
 
        
    </script>
</body>

</html>
